<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表</title>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* 包裹整个内容的大div */
        .containers {
            display: flex;
            height: 100vh; /* 确保页面充满整个浏览器窗口高度 */
        }

        /* 左侧课程列表 */
        .course-sidebar {
            width: 200px;
            padding: 20px;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: start;
        }
        .course-item {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            color: white;
            text-align: center;
            border-radius: 5px;
        }
        .math { background-color: #4CAF50; }
        .english { background-color: #2196F3; }
        .physics { background-color: #FFC107; }
        .chemistry { background-color: #FF5722; }
        .biology { background-color: #9C27B0; }
        .history { background-color: #3F51B5; }
        .geography { background-color: #FF9800; }
        .art { background-color: #009688; }

        /* 课程表 */
        .content {
            flex: 1;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
            padding: 10px;
        }
        th {
            background-color: #f2f2f2;
        }
        td {
            height: 50px;
        }
        .drop-over {
            background-color: rgba(128,128,128,0.5);
        }
    </style>
</head>
<body>

<!-- 大的父容器 -->
<div class="containers">
    <!-- 左侧课程列表 -->
    <div class="course-sidebar" data-drop="move">
        <h2>待选择课程</h2>
        <!-- data-effect="copy" 自定义属性-目的是为了 -
        将元素从左边移到table中是复制，此时cursor应该设置为copy
        移动到table中后变为move，
         -->
        <div data-effect="copy" draggable="true" class="course-item math">数学</div>
        <div data-effect="copy" draggable="true" class="course-item english">英语</div>
        <div data-effect="copy" draggable="true" class="course-item physics">物理</div>
        <div data-effect="copy" draggable="true" class="course-item chemistry">化学</div>
        <div data-effect="copy" draggable="true" class="course-item biology">生物</div>
        <div data-effect="copy" draggable="true" class="course-item history">历史</div>
        <div data-effect="copy" draggable="true" class="course-item geography">地理</div>
        <div data-effect="copy" draggable="true" class="course-item art">艺术</div>
    </div>

    <!-- 课程表内容 -->
    <div class="content">
        <h1>课程表</h1>
        <table>
            <thead>
            <tr>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
            </tr>
            </thead>
            <tbody>
            <!-- 上午时间段 -->
            <tr>
                <td rowspan="4">上午</td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>

            <!-- 下午时间段 -->
            <tr>
                <td rowspan="4">下午</td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
<script src="courseDrag.js"></script>
</html>
